<template>
    <el-dialog v-model="visible" title="膳食日历可视化" width="80%" :close-on-click-modal="false">

        <!-- ✅ 右上角按钮 -->
        <div class="action-buttons">
            <el-button type="primary" @click="exportExcel">导出表格</el-button>
            <el-button type="success" @click="exportImage">导出为图片</el-button>
        </div>

        <table class="calendar-table">
            <thead>
                <tr>
                    <th>餐次 / 星期</th>
                    <th v-for="day in weekdays" :key="day">{{ day }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="meal in meals" :key="meal">
                    <td>{{ meal }}</td>
                    <td v-for="day in weekdays" :key="day">
                        <div v-if="calendarMap[meal + '-' + day]">
                            <div v-for="item in calendarMap[meal + '-' + day]" :key="item">{{ item }}</div>
                        </div>
                        <div v-else style="color:#aaa;">—</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </el-dialog>

</template>

<script setup>
import { ref, defineExpose , nextTick } from 'vue'
import { inject } from 'vue'
const axios = inject("axios")
import * as XLSX from 'xlsx'
import html2canvas from 'html2canvas'   // ✅ 新增导入

const visible = ref(false)
const weekdays = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
const meals = ['早餐', '午餐', '晚餐']
const calendarMap = ref({})  // 键格式：'早餐-星期一'

const open = (data) => {
    visible.value = true
    const map = {}

    for (const row of data) {
        if (row.mealpick?.status === '2') { // 只展示启用状态
            const key = `${row.mealSchedule.meal}-${row.mealSchedule.day}`
            if (!map[key]) map[key] = []
            map[key].push(row.mealitem.name)
        }
    }

    calendarMap.value = map
}

const exportExcel = () => {
    const sheetData = []

    // 表头
    sheetData.push(['餐次 / 星期', ...weekdays])

    // 每一行数据
    for (const meal of meals) {
        const row = [meal]
        for (const day of weekdays) {
            const key = `${meal}-${day}`
            const items = calendarMap.value[key]
            row.push(items ? items.join(', ') : '—')
        }
        sheetData.push(row)
    }

    // 转换为 worksheet 并导出
    const worksheet = XLSX.utils.aoa_to_sheet(sheetData)
    const workbook = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(workbook, worksheet, '膳食日历')
    XLSX.writeFile(workbook, '膳食日历.xlsx')
}

// ✅ 新增：导出为图片
const exportImage = async () => {
    await nextTick()  // 等待 DOM 渲染完成
    const tableEl = document.querySelector('.calendar-table')
    if (!tableEl) return
    html2canvas(tableEl).then(canvas => {
        const link = document.createElement('a')
        link.href = canvas.toDataURL('image/png')
        link.download = '膳食日历.png'
        link.click()
    })
}

defineExpose({ open })
</script>

<style scoped>
.calendar-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.calendar-table th,
.calendar-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    vertical-align: top;
    font-size: 14px;
}

.calendar-table th {
    background-color: #f5f5f5;
}

/* ✅ 右上角按钮区域样式 */
.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 10px;
  margin-top: -10px;
}
</style>
